<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->

<head>

	<!-- Your Basic Site Informations -->
	<title>Enews Responsive News Template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="description" content="Enews is a news or magazine site template that built with very cool responsive template with clean design, fast load, seo friendly, beauty color and a slew of features." />
    <meta name="keywords" content="Site Template, News, Magazine, Portofolio, HTML, CSS, jQuery, Newsletter, PHP Contact, Subscription, Responsive, Marketing, Clean, SEO" />
    <meta name="author" content="Dots Theme" />
    
    <!-- Mobile Specific Meta -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <!-- Stylesheets -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-responsive.min.css">
    <link rel="stylesheet" href="css/flexslider.css">
    <link rel="stylesheet" href="css/prettyPhoto.css">
    <link rel="stylesheet" href="css/style.css">
    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    
    <noscript><link rel="stylesheet" href="css/no-js.css"></noscript> <!-- If JavaScript Disabled -->
    
    <!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
    
    <!-- Favicons -->
	<link rel="shortcut icon" href="images/favicon.ico">
	<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
	<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
	<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
    
    <!-- JavaScript -->
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type='text/javascript' src='js/bootstrap.min.js'></script>
    <script type='text/javascript' src='js/jquery.easing.js'></script>
    <script type='text/javascript' src='js/jquery.flexslider-min.js'></script>
    <script type='text/javascript' src='js/jflickrfeed.min.js'></script>
    <script type='text/javascript' src='js/jquery.fitvids.min.js'></script>
    <script type='text/javascript' src='js/jquery.lazyload.mini.js'></script>
    <script type='text/javascript' src='js/jquery.prettyPhoto.js'></script>
    <script type='text/javascript' src='js/jquery.placeholder.min.js'></script>
    <script type='text/javascript' src='js/jquery.jticker.js'></script>
    <script type='text/javascript' src='js/jquery.mobilemenu.js'></script>
    <script type='text/javascript' src='js/jquery.isotope.min.js'></script>
    <script type='text/javascript' src='js/jquery.hoverdir.js'></script>
    <script type='text/javascript' src='js/modernizr.custom.js'></script>
    <script type="text/javascript" src="js/main.js"></script>
    
</head>

<body>

 <div id="top-navigation">
  <div class="container">
    
   <!-- Navigation -->
   <ul class="nav-menu pull-left">
    <li class="active"><a href="index-2.html">Home</a></li>
    <li><a href="#">Features</a>
     <div class="nav-sub-menu">
      <ul class="container">
       <li><a href="features_typography.html">Typography</a></li>
       <li><a href="features_columns.html">Columns</a></li>
       <li><a href="features_shortcodes.html">Shortcodes</a></li>
       <li><a href="features_pricing.html">Pricing Table</a></li>
       <li><a href="features_sitemap.html">Sitemap</a></li>
      </ul>
     </div>
    </li>
    <li><a href="#">Blog</a>
     <div class="nav-sub-menu">
      <ul class="container">
       <li><a href="blog_posts.html">Archives</a></li>
       <li><a href="blog_photos.html">Photos</a></li>
       <li><a href="blog_videos.html">Videos</a></li>
       <li><a href="blog_musics.html">Musics</a></li>
       <li><a href="blog_reviews.html">Reviews</a></li>
      </ul>
     </div>
    </li>
    <li><a href="#">Portofolio</a>
     <div class="nav-sub-menu">
      <ul class="container">
       <li><a href="portofolio.html">1 Column</a></li>
       <li><a href="portofolio_2.html">2 Columns</a></li>
       <li><a href="portofolio_3.html">3 Columns</a></li>
       <li><a href="portofolio_4.html">4 Columns</a></li>
       <li><a href="single_portofolio.html">Single Portofolio</a></li>
       <li><a href="single_portofolio_2.html">Single Portofolio 2</a></li>
      </ul>
     </div>
    </li>
    <li><a href="#">Pages</a>
     <div class="nav-sub-menu">
      <ul class="container">
       <li><a href="author.html">Author</a></li>
       <li><a href="404.html">404 Page</a></li>
       <li><a href="search.html">Search</a></li>
       <li><a href="index-2.html">Homepage 1</a></li>
       <li><a href="index_2.html">Homepage 2</a></li>
       <li><a href="index_3.html">Homepage 3</a></li>
       <li><a href="index_4.html">Homepage 4</a></li>
      </ul>
     </div>
    </li>
    <li><a href="contact.html">Contact</a></li>
   </ul>
    
   <!-- Search Form -->
   <form name="form-search" method="post" action="http://dotstheme.com/demo/premium/enews_responsive_news_template/html/stretched/search.html" class="form-search pull-right">
    <input type="text" name="search" placeholder="Search...." class="input-icon input-icon-search" />
   </form>
    
   <!-- Social Media -->
   <ul class="social pull-right">
    <li><a href="#" data-placement="bottom" data-original-title="Find us on LinkedIn"><img src="images/social/infocus/linkedin-logo.png" alt="LinkedIn"></a></li>
     <li><a href="#" data-placement="bottom" data-original-title="Find us on Flickr"><img src="images/social/infocus/flickr.png" alt="Flickr"></a></li>
     <li><a href="#" data-placement="bottom" data-original-title="Like us on Facebook"><img src="images/social/infocus/facebook-logo.png" alt="Facebook"></a></li>
     <li><a href="#" data-placement="bottom" data-original-title="Follow on DeviantArt"><img src="images/social/infocus/deviantart.png" alt="DeviantArt"></a></li>
    <li><a href="#" data-placement="bottom" data-original-title="Follow on Twitter"><img src="images/social/infocus/twitter.png" alt="Twitter"></a></li>
    <li><a href="#" data-placement="bottom" data-original-title="Follow on Stumbleupon"><img src="images/social/infocus/stumbleupon.png" alt="Stumbleupon"></a></li>
    <li><a href="#" data-placement="bottom" data-original-title="Call us via Skype"><img src="images/social/infocus/skype.png" alt="Skype"></a></li>
   </ul>
   
  </div> <!-- End Container -->
 </div> <!-- End Top-Navigation -->
 
 <div class="container">
  <header id="header" class="clearfix">
   
   <!-- Logo -->
   <div class="logo pull-left">
    <a href="index-2.html"><img src="images/logo.png" alt="Enews" /></a>
   </div>
   
   <!-- Ads -->
   <div class="ads pull-right">
    <img src="images/ads/480x80.png" alt="Ads" />
   </div>
   
  </header> <!-- End Header -->
  
  <nav id="main-navigation" class="clearfix margin-bottom40">
   <ul>
    <li><a href="blog_posts.html">Business</a></li>
    <li><a href="blog_posts.html">Technology <i class="arrow-main-nav"></i></a>
     <ul>
      <li><a href="blog_posts.html">Smartphone</a></li>
      <li><a href="blog_posts.html">Tablet</a></li>
      <li><a href="blog_posts.html">Internet</a></li>
      <li><a href="blog_posts.html">Software</a></li>
      <li><a href="blog_posts.html">Hardware</a></li>
      <li><a href="blog_posts.html">Laptop</a></li>
      <li><a href="blog_posts.html">Hot News <i class="arrow-main-nav"></i></a>
       <ul>
        <li><a href="blog_posts.html">Windows 8</a></li>
        <li><a href="blog_posts.html">Apple iPhone 5</a></li>
        <li><a href="blog_posts.html">Microsoft Surface</a></li>
        <li><a href="blog_posts.html">Nokia Lumia 920</a></li>
       </ul>
      </li>
     </ul>
    </li>
    <li><a href="blog_posts.html">Education</a></li>
    <li><a href="blog_posts.html">Entertainment</a></li>
    <li><a href="blog_photos.html">Photo <i class="arrow-main-nav"></i></a>
     <ul>
      <li><a href="single_photo.html">Single Photo</a></li>
     </ul>
    </li>
    <li><a href="blog_videos.html">Video <i class="arrow-main-nav"></i></a>
     <ul>
      <li><a href="single_video.html">Single Video</a></li>
     </ul>
    </li>
    <li><a href="blog_musics.html">Music <i class="arrow-main-nav"></i></a>
     <ul>
      <li><a href="single_music.html">Single Music</a></li>
     </ul>
    </li>
    <li><a href="blog_reviews.html">Review <i class="arrow-main-nav"></i></a>
     <ul>
      <li><a href="single_review.html">Single Review</a></li>
     </ul>
    </li>
   </ul>
  </nav> <!-- End Main-Navigation -->
  
  <div class="row-fluid">
   <div id="main" class="span8 page image-preloader">
  
    <div class="row-fluid">
    
     <h1>Shortcodes</h1>
     
     <p>Sagittis elementum amet tristique urna, aliquam, elit, et cum odio mus vel platea, mus! Platea eros? Scelerisque velit dapibus ut et! Ac, in eros! Montes porttitor.</p><br>
     
     <h4>Tabs</h4>
     
     <ul class="nav nav-tabs">
      <li class="active"><a href="#menu-1" data-toggle="tab">Tab Menu 1</a></li>
      <li><a href="#menu-2" data-toggle="tab">Tab Menu 2</a></li>
      <li><a href="#menu-3" data-toggle="tab">Tab Menu 3</a></li>
      <li><a href="#menu-4" data-toggle="tab">Tab Menu 4</a></li>
     </ul>
     
     <div class="tab-content">
      <div class="tab-pane active" id="menu-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum semper nulla vitae diam lobortis interdum varius arcu tincidunt. Quisque sed nisi vel lorem blandit pharetra. Vivamus mollis blandit elit, nec lobortis tellus laoreet id. Integer sodales, lorem eu pellentesque scelerisque, urna orci lobortis mauris, sed facilisis mi est eu enim. Aenean felis tellus, consequat nec hendrerit a, ornare quis arcu. Aenean imperdiet sem nec mauris bibendum tristique. Etiam eros erat, feugiat ac fringilla sed, ultricies sed tellus. Suspendisse nisi sem, rhoncus sit amet malesuada nec, placerat ut magna. Morbi gravida lacus massa, quis tincidunt nisi. Sed porttitor ullamcorper fringilla. Quisque et purus turpis.</div>
      <div class="tab-pane" id="menu-2">Suspendisse ornare luctus tempus. Nulla nec orci erat, sed consequat lacus. Curabitur vel odio eu sapien fermentum placerat pharetra ac lectus. Ut erat sapien, lobortis nec mattis eget, tempus sit amet elit. Duis gravida tincidunt fermentum. Etiam metus lectus, facilisis non imperdiet sit amet, fermentum vitae leo. Ut elit ante, euismod vel interdum non, bibendum eu risus. Etiam laoreet, metus id sodales sodales, ligula lectus sagittis ante, quis pretium dui est ut sem. Aenean sed lorem vitae turpis aliquam vehicula in quis dui. Etiam risus ligula, elementum et fringilla eget, porta id neque. Quisque tellus turpis, ultrices a aliquet at, pellentesque a nibh. Ut feugiat interdum dui, non lacinia nulla vestibulum a.</div>
      <div class="tab-pane" id="menu-3">Quisque placerat erat ac nunc consequat faucibus. Aenean tortor purus, faucibus a varius nec, facilisis vel enim. Maecenas quis felis ante. Aenean vulputate, risus a porta porta, sapien lectus euismod nisi, ut dapibus felis ante quis diam. Morbi velit tortor, adipiscing vel auctor nec, malesuada a risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur accumsan venenatis tellus, quis consectetur est rutrum at. Suspendisse potenti. Quisque libero mauris, aliquam quis condimentum ut, eleifend at ante. Sed molestie est vitae quam elementum mattis. Suspendisse consectetur, odio vel feugiat varius, est dolor imperdiet tellus, sed ultricies orci nisi ut justo. In molestie aliquam tortor rutrum dignissim.</div>
      <div class="tab-pane" id="menu-4">Sed mi urna, adipiscing eget dignissim ac, dictum in nisl. Fusce id erat orci, ut placerat augue. Nulla tortor ligula, feugiat tincidunt accumsan ac, feugiat eget mi. Fusce euismod elit eget erat viverra pharetra. Aliquam tellus purus, convallis in tempor at, lacinia non lectus. Vivamus aliquet dictum volutpat. Sed sit amet urna tellus. Mauris id lacus arcu, nec volutpat odio. Sed risus urna, pulvinar vitae fermentum at, rutrum vitae arcu. Proin ante orci, congue quis molestie ac, ornare ac ipsum. Proin sit amet semper orci. Donec posuere, mi et tempus adipiscing, elit odio auctor eros, in fringilla quam velit sed dolor. Duis aliquam tristique nulla.</div>
     </div><br><br>
     
     <h4>Accordion</h4>
     
     <div class="accordion" id="accordion">
      <div class="accordion-group">
       <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Menu Item 1</a>
       </div>
       <div id="collapseOne" class="accordion-body collapse in">
        <div class="accordion-inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum semper nulla vitae diam lobortis interdum varius arcu tincidunt. Quisque sed nisi vel lorem blandit pharetra. Vivamus mollis blandit elit, nec lobortis tellus laoreet id. Integer sodales, lorem eu pellentesque scelerisque, urna orci lobortis mauris, sed facilisis mi est eu enim. Aenean felis tellus, consequat nec hendrerit a, ornare quis arcu. Aenean imperdiet sem nec mauris bibendum tristique. Etiam eros erat, feugiat ac fringilla sed, ultricies sed tellus. Suspendisse nisi sem, rhoncus sit amet malesuada nec, placerat ut magna. Morbi gravida lacus massa, quis tincidunt nisi. Sed porttitor ullamcorper fringilla. Quisque et purus turpis.</div>
       </div>
      </div>
      <div class="accordion-group">
       <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Menu Item 2</a>
       </div>
       <div id="collapseTwo" class="accordion-body collapse">
        <div class="accordion-inner">Quisque placerat erat ac nunc consequat faucibus. Aenean tortor purus, faucibus a varius nec, facilisis vel enim. Maecenas quis felis ante. Aenean vulputate, risus a porta porta, sapien lectus euismod nisi, ut dapibus felis ante quis diam. Morbi velit tortor, adipiscing vel auctor nec, malesuada a risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur accumsan venenatis tellus, quis consectetur est rutrum at. Suspendisse potenti. Quisque libero mauris, aliquam quis condimentum ut, eleifend at ante. Sed molestie est vitae quam elementum mattis. Suspendisse consectetur, odio vel feugiat varius, est dolor imperdiet tellus, sed ultricies orci nisi ut justo. In molestie aliquam tortor rutrum dignissim.</div>
       </div>
      </div>
      <div class="accordion-group">
       <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Menu Item 3</a>
       </div>
       <div id="collapseThree" class="accordion-body collapse">
        <div class="accordion-inner">Sed mi urna, adipiscing eget dignissim ac, dictum in nisl. Fusce id erat orci, ut placerat augue. Nulla tortor ligula, feugiat tincidunt accumsan ac, feugiat eget mi. Fusce euismod elit eget erat viverra pharetra. Aliquam tellus purus, convallis in tempor at, lacinia non lectus. Vivamus aliquet dictum volutpat. Sed sit amet urna tellus. Mauris id lacus arcu, nec volutpat odio. Sed risus urna, pulvinar vitae fermentum at, rutrum vitae arcu. Proin ante orci, congue quis molestie ac, ornare ac ipsum. Proin sit amet semper orci. Donec posuere, mi et tempus adipiscing, elit odio auctor eros, in fringilla quam velit sed dolor. Duis aliquam tristique nulla.</div>
       </div>
      </div>
     </div><br>
     
     <h4>Buttons</h4>
     
     <p>
      <input type="button" name="button" class="btn btn-large" value="Large" />
      <input type="button" name="button" class="btn btn-medium" value="Medium" />
      <input type="button" name="button" value="Default" />
      <input type="button" name="button" class="btn btn-small" value="Small" />
     </p><br>
     
     <h5>Custom Button Colors</h5>
     <p>
      <input type="button" name="button" value="Orange Button" />
      <input type="button" name="button" class="btn btn-green" value="Green Button" />
      <input type="button" name="button" class="btn btn-blue" value="Blue Button" />
      <input type="button" name="button" class="btn btn-violet" value="Blue Button" />
      <input type="button" name="button" class="btn btn-red" value="Red Button" />
      <input type="button" name="button" class="btn btn-yellow" value="Yellow Button" />
     </p><br><br>
     
     <h4>Notifications</h4>
     
     <div class="alert alert-block">
      <button type="button" class="close" data-dismiss="alert">&times;</button>
      <h4>Warning!</h4>
      Aenean vulputate, risus a porta porta, sapien lectus euismod nisi, ut dapibus felis ante quis diam. Morbi velit tortor, adipiscing vel auctor nec, malesuada a risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur accumsan venenatis tellus, quis consectetur est rutrum at.
     </div>
     <div class="alert alert-error">
      <button type="button" class="close" data-dismiss="alert">&times;</button>
      <h4>Error!</h4>
      Aenean vulputate, risus a porta porta, sapien lectus euismod nisi, ut dapibus felis ante quis diam. Morbi velit tortor, adipiscing vel auctor nec, malesuada a risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur accumsan venenatis tellus, quis consectetur est rutrum at.
     </div>
     <div class="alert alert-info">
      <button type="button" class="close" data-dismiss="alert">&times;</button>
      <h4>Information!</h4>
      Aenean vulputate, risus a porta porta, sapien lectus euismod nisi, ut dapibus felis ante quis diam. Morbi velit tortor, adipiscing vel auctor nec, malesuada a risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur accumsan venenatis tellus, quis consectetur est rutrum at.
     </div>
     <div class="alert alert-success">
      <button type="button" class="close" data-dismiss="alert">&times;</button>
      <h4>Success!</h4>
      Aenean vulputate, risus a porta porta, sapien lectus euismod nisi, ut dapibus felis ante quis diam. Morbi velit tortor, adipiscing vel auctor nec, malesuada a risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur accumsan venenatis tellus, quis consectetur est rutrum at.
     </div><br>
     
     <h4>Table</h4>
     
     <table class="table table-bordered">
      <thead>
       <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
       </tr>
      </thead>
      <tfoot>
       <tr>
       <td>Footer 1</td>
       <td>Footer 2</td>
       <td>Footer 3</td>
      </tr>
      </tfoot>
     <tbody>
      <tr>
       <td>Donec dignissim leo sit amet vestibulum.</td>
       <td>Maecenas luctus, mi quis sodales posuere.</td>
       <td>Proin egestas consectetur iaculis.</td>
      </tr>
      <tr>
       <td>Donec dignissim leo sit amet vestibulum.</td>
       <td>Maecenas luctus, mi quis sodales posuere.</td>
       <td>Proin egestas consectetur iaculis.</td>
      </tr>
      <tr>
       <td>Donec dignissim leo sit amet vestibulum.</td>
       <td>Maecenas luctus, mi quis sodales posuere.</td>
       <td>Proin egestas consectetur iaculis.</td>
      </tr>
     </tbody>
    </table><br>
     
     <h4>Photo Gallery</h4>
     
     <div class="flexslider loading">
      <ul class="slides">
       <li><img src="images/content/full/4.jpg" alt="Screenshoot 1" /></li>
       <li><img src="images/content/full/6.jpg" alt="Screenshoot 2" /></li>
       <li><img src="images/content/full/9.jpg" alt="Screenshoot 3" /></li>
      </ul>
     </div><br><br>
     
     <h4>Rating Details</h4>
     
     <div class="rate-details">
      <div class="header">
       <h4>Review Overview</h4>
      </div>
       
      <div class="base-rate"> <!-- One -->
       <div class="rate-text">
        <span class="left">Expensive</span>
        <span class="right">92%</span>
       </div>
       <div class="rate-val" style="width:92%;"></div>
      </div>
       
      <div class="base-rate"> <!-- Two -->
       <div class="rate-text">
        <span class="left">Beautiful</span>
        <span class="right">86%</span>
       </div>
       <div class="rate-val" style="width:86%;"></div>
      </div>
       
      <div class="base-rate"> <!-- Three -->
       <div class="rate-text">
        <span class="left">Design</span>
        <span class="right">98%</span>
       </div>
       <div class="rate-val" style="width:98%;"></div>
      </div>
       
      <div class="base-rate"> <!-- Four -->
       <div class="rate-text">
        <span class="left">Inspirational</span>
        <span class="right">87%</span>
       </div>
       <div class="rate-val" style="width:87%;"></div>
      </div>
       
      <div class="base-rate"> <!-- Five -->
       <div class="rate-text">
        <span class="left">Style</span>
        <span class="right">96%</span>
       </div>
       <div class="rate-val" style="width:96%;"></div>
      </div>
       
      <div class="rate-overall"> <!-- Overall -->
       <div class="rating">
        <h2>91<sup>%</sup></h2>
        <p>Excellent</p>
       </div>
       <div class="desc">
        <p>Enter a rating summary here. You can do a short summary, or even a pros and cons list.</p>
       </div>
      </div>
       
     </div><br><br>

	 <h4>SoundCloud Embed</h4>
     
     <figure class="embed-section">
      <iframe height="166" src="https://w.soundcloud.com/player/?url=http://api.soundcloud.com/tracks/43227597"></iframe>
     </figure><br><br>
     
     <h4>Video Embed</h4>
     
     <figure class="embed-section">
      <iframe width="640" height="360" src="http://www.youtube.com/embed/8MGPpNI0mBk?feature=player_detailpage"></iframe>
     </figure><br><br>
     
     <h4>Icon Glyphs</h4>
     <ul class="the-icons clearfix">
      <li><i class="icon-glass"></i> icon-glass</li>
      <li><i class="icon-music"></i> icon-music</li>
      <li><i class="icon-search"></i> icon-search</li>
      <li><i class="icon-envelope"></i> icon-envelope</li>
      <li><i class="icon-heart"></i> icon-heart</li>
      <li><i class="icon-star"></i> icon-star</li>
      <li><i class="icon-star-empty"></i> icon-star-empty</li>
      <li><i class="icon-user"></i> icon-user</li>
      <li><i class="icon-film"></i> icon-film</li>
      <li><i class="icon-th-large"></i> icon-th-large</li>
      <li><i class="icon-th"></i> icon-th</li>
      <li><i class="icon-th-list"></i> icon-th-list</li>
      <li><i class="icon-ok"></i> icon-ok</li>
      <li><i class="icon-remove"></i> icon-remove</li>
      <li><i class="icon-zoom-in"></i> icon-zoom-in</li>
      <li><i class="icon-zoom-out"></i> icon-zoom-out</li>
      <li><i class="icon-off"></i> icon-off</li>
      <li><i class="icon-signal"></i> icon-signal</li>
      <li><i class="icon-cog"></i> icon-cog</li>
      <li><i class="icon-trash"></i> icon-trash</li>
      <li><i class="icon-home"></i> icon-home</li>
      <li><i class="icon-file"></i> icon-file</li>
      <li><i class="icon-time"></i> icon-time</li>
      <li><i class="icon-road"></i> icon-road</li>
      <li><i class="icon-download-alt"></i> icon-download-alt</li>
      <li><i class="icon-download"></i> icon-download</li>
      <li><i class="icon-upload"></i> icon-upload</li>
      <li><i class="icon-inbox"></i> icon-inbox</li>

      <li><i class="icon-play-circle"></i> icon-play-circle</li>
      <li><i class="icon-repeat"></i> icon-repeat</li>
      <li><i class="icon-refresh"></i> icon-refresh</li>
      <li><i class="icon-list-alt"></i> icon-list-alt</li>
      <li><i class="icon-lock"></i> icon-lock</li>
      <li><i class="icon-flag"></i> icon-flag</li>
      <li><i class="icon-headphones"></i> icon-headphones</li>
      <li><i class="icon-volume-off"></i> icon-volume-off</li>
      <li><i class="icon-volume-down"></i> icon-volume-down</li>
      <li><i class="icon-volume-up"></i> icon-volume-up</li>
      <li><i class="icon-qrcode"></i> icon-qrcode</li>
      <li><i class="icon-barcode"></i> icon-barcode</li>
      <li><i class="icon-tag"></i> icon-tag</li>
      <li><i class="icon-tags"></i> icon-tags</li>
      <li><i class="icon-book"></i> icon-book</li>
      <li><i class="icon-bookmark"></i> icon-bookmark</li>
      <li><i class="icon-print"></i> icon-print</li>
      <li><i class="icon-camera"></i> icon-camera</li>
      <li><i class="icon-font"></i> icon-font</li>
      <li><i class="icon-bold"></i> icon-bold</li>
      <li><i class="icon-italic"></i> icon-italic</li>
      <li><i class="icon-text-height"></i> icon-text-height</li>
      <li><i class="icon-text-width"></i> icon-text-width</li>
      <li><i class="icon-align-left"></i> icon-align-left</li>
      <li><i class="icon-align-center"></i> icon-align-center</li>
      <li><i class="icon-align-right"></i> icon-align-right</li>
      <li><i class="icon-align-justify"></i> icon-align-justify</li>
      <li><i class="icon-list"></i> icon-list</li>

      <li><i class="icon-indent-left"></i> icon-indent-left</li>
      <li><i class="icon-indent-right"></i> icon-indent-right</li>
      <li><i class="icon-facetime-video"></i> icon-facetime-video</li>
      <li><i class="icon-picture"></i> icon-picture</li>
      <li><i class="icon-pencil"></i> icon-pencil</li>
      <li><i class="icon-map-marker"></i> icon-map-marker</li>
      <li><i class="icon-adjust"></i> icon-adjust</li>
      <li><i class="icon-tint"></i> icon-tint</li>
      <li><i class="icon-edit"></i> icon-edit</li>
      <li><i class="icon-share"></i> icon-share</li>
      <li><i class="icon-check"></i> icon-check</li>
      <li><i class="icon-move"></i> icon-move</li>
      <li><i class="icon-step-backward"></i> icon-step-backward</li>
      <li><i class="icon-fast-backward"></i> icon-fast-backward</li>
      <li><i class="icon-backward"></i> icon-backward</li>
      <li><i class="icon-play"></i> icon-play</li>
      <li><i class="icon-pause"></i> icon-pause</li>
      <li><i class="icon-stop"></i> icon-stop</li>
      <li><i class="icon-forward"></i> icon-forward</li>
      <li><i class="icon-fast-forward"></i> icon-fast-forward</li>
      <li><i class="icon-step-forward"></i> icon-step-forward</li>
      <li><i class="icon-eject"></i> icon-eject</li>
      <li><i class="icon-chevron-left"></i> icon-chevron-left</li>
      <li><i class="icon-chevron-right"></i> icon-chevron-right</li>
      <li><i class="icon-plus-sign"></i> icon-plus-sign</li>
      <li><i class="icon-minus-sign"></i> icon-minus-sign</li>
      <li><i class="icon-remove-sign"></i> icon-remove-sign</li>
      <li><i class="icon-ok-sign"></i> icon-ok-sign</li>

      <li><i class="icon-question-sign"></i> icon-question-sign</li>
      <li><i class="icon-info-sign"></i> icon-info-sign</li>
      <li><i class="icon-screenshot"></i> icon-screenshot</li>
      <li><i class="icon-remove-circle"></i> icon-remove-circle</li>
      <li><i class="icon-ok-circle"></i> icon-ok-circle</li>
      <li><i class="icon-ban-circle"></i> icon-ban-circle</li>
      <li><i class="icon-arrow-left"></i> icon-arrow-left</li>
      <li><i class="icon-arrow-right"></i> icon-arrow-right</li>
      <li><i class="icon-arrow-up"></i> icon-arrow-up</li>
      <li><i class="icon-arrow-down"></i> icon-arrow-down</li>
      <li><i class="icon-share-alt"></i> icon-share-alt</li>
      <li><i class="icon-resize-full"></i> icon-resize-full</li>
      <li><i class="icon-resize-small"></i> icon-resize-small</li>
      <li><i class="icon-plus"></i> icon-plus</li>
      <li><i class="icon-minus"></i> icon-minus</li>
      <li><i class="icon-asterisk"></i> icon-asterisk</li>
      <li><i class="icon-exclamation-sign"></i> icon-exclamation-sign</li>
      <li><i class="icon-gift"></i> icon-gift</li>
      <li><i class="icon-leaf"></i> icon-leaf</li>
      <li><i class="icon-fire"></i> icon-fire</li>
      <li><i class="icon-eye-open"></i> icon-eye-open</li>
      <li><i class="icon-eye-close"></i> icon-eye-close</li>
      <li><i class="icon-warning-sign"></i> icon-warning-sign</li>
      <li><i class="icon-plane"></i> icon-plane</li>
      <li><i class="icon-calendar"></i> icon-calendar</li>
      <li><i class="icon-random"></i> icon-random</li>
      <li><i class="icon-comment"></i> icon-comment</li>
      <li><i class="icon-magnet"></i> icon-magnet</li>

      <li><i class="icon-chevron-up"></i> icon-chevron-up</li>
      <li><i class="icon-chevron-down"></i> icon-chevron-down</li>
      <li><i class="icon-retweet"></i> icon-retweet</li>
      <li><i class="icon-shopping-cart"></i> icon-shopping-cart</li>
      <li><i class="icon-folder-close"></i> icon-folder-close</li>
      <li><i class="icon-folder-open"></i> icon-folder-open</li>
      <li><i class="icon-resize-vertical"></i> icon-resize-vertical</li>
      <li><i class="icon-resize-horizontal"></i> icon-resize-horizontal</li>
      <li><i class="icon-hdd"></i> icon-hdd</li>
      <li><i class="icon-bullhorn"></i> icon-bullhorn</li>
      <li><i class="icon-bell"></i> icon-bell</li>
      <li><i class="icon-certificate"></i> icon-certificate</li>
      <li><i class="icon-thumbs-up"></i> icon-thumbs-up</li>
      <li><i class="icon-thumbs-down"></i> icon-thumbs-down</li>
      <li><i class="icon-hand-right"></i> icon-hand-right</li>
      <li><i class="icon-hand-left"></i> icon-hand-left</li>
      <li><i class="icon-hand-up"></i> icon-hand-up</li>
      <li><i class="icon-hand-down"></i> icon-hand-down</li>
      <li><i class="icon-circle-arrow-right"></i> icon-circle-arrow-right</li>
      <li><i class="icon-circle-arrow-left"></i> icon-circle-arrow-left</li>
      <li><i class="icon-circle-arrow-up"></i> icon-circle-arrow-up</li>
      <li><i class="icon-circle-arrow-down"></i> icon-circle-arrow-down</li>
      <li><i class="icon-globe"></i> icon-globe</li>
      <li><i class="icon-wrench"></i> icon-wrench</li>
      <li><i class="icon-tasks"></i> icon-tasks</li>
      <li><i class="icon-filter"></i> icon-filter</li>
      <li><i class="icon-briefcase"></i> icon-briefcase</li>
      <li><i class="icon-fullscreen"></i> icon-fullscreen</li>
     </ul>
    
    </div> <!-- End Row-Fluid -->
   </div> <!-- End Main -->
  
   <div id="sidebar" class="span4">
  
    <div class="widget clearfix">
     <ul class="social-subscribers">
      <li>
       <a href="#" data-original-title="Like us on Facebook"><img src="images/social/somacro/facebook.png" alt="Facebook" /></a>
       <p>25,645<i>likes</i></p>
      </li>
      <li>
       <a href="#" data-original-title="Follow us on Twitter"><img src="images/social/somacro/twitter.png" alt="Twitter" /></a>
       <p>8,480<i>followers</i></p>
      </li>
      <li>
       <a href="#" data-original-title="Subscribe our RSS Feed"><img src="images/social/somacro/rss.png" alt="RSS" /></a>
       <p>17,289<i>subscribers</i></p>
      </li>
     </ul>
    </div> <!-- End Widget -->
   
    <div class="widget clearfix">
     <div class="enews-tab">
    
      <!-- Tab Menu -->
      <ul class="nav nav-tabs" id="enewsTabs">
       <li class="active"><a href="#tab-populars" data-toggle="tab">Populars</a></li>
       <li><a href="#tab-recents" data-toggle="tab">Recents</a></li>
       <li><a href="#tab-comments" data-toggle="tab">Comments</a></li>
      </ul>
 
      <div class="tab-content">
       <div class="tab-pane active" id="tab-populars">
       
        <!-- One -->
        <div class="item">
         <figure class="pull-left"><img src="images/content/300/5.jpg" alt="Thumbnail 1" /></figure>
         <div class="pull-right content">
          <h4><a href="single_post.html" title="View permalink Small Market and St. Sebastian's Square in Opole">Small Market and St. Sebastian's Square in Opole</a></h4>
          <p class="meta">7,849 views&nbsp;&nbsp;|&nbsp;&nbsp;49 comments</p>
         </div>
        </div>
       
        <!-- Two -->
        <div class="item">
         <figure class="pull-left"><img src="images/content/300/12.jpg" alt="Thumbnail 2" /></figure>
         <div class="pull-right content">
          <h4><a href="single_post.html" title="View permalink Living Room in Italy">Living Room in Italy</a></h4>
          <p class="meta">6,988 views&nbsp;&nbsp;|&nbsp;&nbsp;42 comments</p>
         </div>
        </div>
       
        <!-- Three -->
        <div class="item">
         <figure class="pull-left"><img src="images/content/300/7.jpg" alt="Thumbnail 3" /></figure>
         <div class="pull-right content">
          <h4><a href="single_post.html" title="View permalink Platform House With Minimal Design">Platform House With Minimal Design</a></h4>
          <p class="meta">5,724 views&nbsp;&nbsp;|&nbsp;&nbsp;35 comments</p>
         </div>
        </div>
       
        <!-- Four -->
        <div class="item">
         <figure class="pull-left"><img src="images/content/300/4.jpg" alt="Thumbnail 4" /></figure>
         <div class="pull-right content">
          <h4><a href="single_post.html" title="View permalink Winter Kitchen With Silver Panorama">Winter Kitchen With Silver Panorama</a></h4>
          <p class="meta">5,198 views&nbsp;&nbsp;|&nbsp;&nbsp;39 comments</p>
         </div>
        </div>
       
        <!-- Five -->
        <div class="item">
         <figure class="pull-left"><img src="images/content/300/9.jpg" alt="Thumbnail 5" /></figure>
         <div class="pull-right content">
          <h4><a href="single_post.html" title="View permalink Camerette - Your Time to Explore">Camerette - Your Time to Explore</a></h4>
          <p class="meta">4,276 views&nbsp;&nbsp;|&nbsp;&nbsp;22 comments</p>
         </div>
        </div>
       
       </div> <!-- End Populars -->
      
       <div class="tab-pane" id="tab-recents">
       
        <!-- One -->
        <div class="item">
         <figure class="pull-left"><img src="images/content/300/2.jpg" alt="Thumbnail 1" /></figure>
         <div class="pull-right content">
          <h4><a href="single_post.html" title="View permalink Alvear Art Black and White Theme">Alvear Art Black and White Theme</a></h4>
          <p class="meta">In <a href="blog_posts.html">Technology</a> on Jan. 14, 2013</p>
         </div>
        </div>
       
        <!-- Two -->
        <div class="item">
         <figure class="pull-left"><img src="images/content/300/5.jpg" alt="Thumbnail 2" /></figure>
         <div class="pull-right content">
          <h4><a href="single_post.html" title="View permalink Camerette - Your Time to Explore">Camerette - Your Time to Explore</a></h4>
          <p class="meta">In <a href="blog_posts.html">Education</a> on Jan. 13, 2013</p>
         </div>
        </div>
       
        <!-- Three -->
        <div class="item">
         <figure class="pull-left"><img src="images/content/300/4.jpg" alt="Thumbnail 3" /></figure>
         <div class="pull-right content">
          <h4><a href="single_post.html" title="View permalink Living Room in Italy">Living Room in Italy</a></h4>
          <p class="meta">In <a href="blog_posts.html">Entertainment</a> on Jan. 12, 2013</p>
         </div>
        </div>
       
        <!-- Four -->
        <div class="item">
         <figure class="pull-left"><img src="images/content/300/11.jpg" alt="Thumbnail 4" /></figure>
         <div class="pull-right content">
          <h4><a href="single_post.html" title="View permalink Mosaic Pool is Amazing And Beautiful Place">Mosaic Pool is Amazing And Beautiful Place</a></h4>
          <p class="meta">In <a href="blog_posts.html">Education</a> on Jan. 11, 2013</p>
         </div>
        </div>
       
        <!-- Five -->
        <div class="item">
         <figure class="pull-left"><img src="images/content/300/8.jpg" alt="Thumbnail 5" /></figure>
         <div class="pull-right content">
          <h4><a href="single_post.html" title="View permalink Platform House with Minimal Design">Platform House with Minimal Design</a></h4>
          <p class="meta">In <a href="blog_posts.html">Business</a> on Jan. 10, 2013</p>
         </div>
        </div>
       
       </div> <!-- End Recents -->
      
       <div class="tab-pane" id="tab-comments">
       
        <!-- One -->
        <div class="item">
         <figure class="pull-left"><img src="images/content/avatar/1.jpg" alt="Avatar 1" /></figure>
         <div class="pull-right content">
          <p><a href="#">mdkiwol</a> on <a href="single_post.html" title="View comment on Glass House Below The Dark of Moon Light">Glass House Below The Dark of Moon Light</a></p>
         </div>
        </div>
       
        <!-- Two -->
        <div class="item">
         <figure class="pull-left"><img src="images/content/avatar/2.jpg" alt="Avatar 2" /></figure>
         <div class="pull-right content">
          <p><a href="#">holland</a> on <a href="single_post.html" title="View comment on Winter Kitchen with Silver Panorama">Winter Kitchen with Silver Panorama</a></p>
         </div>
        </div>
       
        <!-- Three -->
        <div class="item">
         <figure class="pull-left"><img src="images/content/avatar/3.jpg" alt="Avatar 3" /></figure>
         <div class="pull-right content">
          <p><a href="#">jagerjack</a> on <a href="single_post.html" title="View comment on Mosaic Pool is Very Amazing And Beautiful">Mosaic Pool is Very Amazing And Beautiful</a></p>
         </div>
        </div>
       
        <!-- Four -->
        <div class="item">
         <figure class="pull-left"><img src="images/content/avatar/4.jpg" alt="Avatar 4" /></figure>
         <div class="pull-right content">
          <p><a href="#">john</a> on <a href="single_post.html" title="View comment on House in The Woods">House in The Woods</a></p>
         </div>
        </div>
       
        <!-- Five -->
        <div class="item">
         <figure class="pull-left"><img src="images/content/avatar/3.jpg" alt="Avatar 5" /></figure>
         <div class="pull-right content">
          <p><a href="#">jagerjack</a> on <a href="single_post.html" title="View comment on Camerette - Your Time to Explore">Camerette - Your Time to Explore</a></p>
         </div>
        </div>
       
       </div> <!-- End Comments -->
      </div> <!-- End Tab-Content -->
     
     </div> <!-- End Enews-Tab --> 
    </div> <!-- End Widget -->
   
    <div class="widget clearfix">
     <div class="sponsors">
     
      <div class="header">
       <h4>Sponsors</h4>
      </div>
     
      <div class="content">  
       <img src="images/ads/180x180.png" alt="Sponsor 1" />
       <img src="images/ads/180x180.png" alt="Sponsor 2" />
       <img src="images/ads/180x180.png" alt="Sponsor 3" />
       <img src="images/ads/180x180.png" alt="Sponsor 4" />
      </div>
     
     </div>
    </div> <!-- End Widget -->
   
    <div class="widget clearfix">
     <div class="best-picture">
    
      <div class="header">
       <h4>Best Picture</h4>
      </div>
    
      <div class="content">
       <p><a href="single_photo.html" title="View permalink House in The Woods">Aenean dictum pharetra nibh, sodales luctus felis aliquet at. Nulla vulputate venenatis orci [..]</a></p>
       
       <!-- Photo Galleries -->
       <figure class="flexslider loading">
        <ul class="slides">
         <li><img src="images/content/full/4.jpg" alt="Thumbnail 1" /></li>
         <li><img src="images/content/full/9.jpg" alt="Thumbnail 2" /></li>
         <li><img src="images/content/full/2.jpg" alt="Thumbnail 3" /></li>
        </ul>
       </figure>
       
       <div class="meta">By <a href="author.html">mdkiwol</a>&nbsp;&nbsp;|&nbsp;&nbsp;Jan. 7, 2013&nbsp;&nbsp;|&nbsp;&nbsp;<a href="single_video.html">15 comments</a></div>
      </div>
     
     </div>
    </div> <!-- End Widget -->
   
    <div class="widget clearfix">
     <div class="subscribe-form">
    
      <div class="header">
       <h4>Subscribe Us</h4>
      </div>
    
      <div class="content">
       <p>You can stay up-to-date with our latest news with subscribe our newsletter.</p>
       <form name="subscribe-form" id="enews-subscribe-form" method="post" action="#">
        <input type="text" name="email_address" placeholder="ex: your_email@domain.com" />
        <input type="submit" name="submit" value="Send" />
       </form>
      </div>
     
     </div>
    </div> <!-- End Widget -->
   
    <div class="widget clearfix">
     <div class="best-video">
    
      <div class="header">
       <h4>Video of The Week</h4>
      </div>
    
      <div class="content">
       <p><a href="single_video.html" title="View permalink Devil May Cry Launch Trailer">Aenean dictum pharetra nibh, sodales luctus felis aliquet at. Nulla vulputate venenatis orci [..]</a></p>
       <figure><iframe height="240" src="http://www.youtube.com/embed/psSqNRaHBgk?feature=player_detailpage"></iframe></figure>
       <div class="meta">By <a href="author.html">mdkiwol</a>&nbsp;&nbsp;|&nbsp;&nbsp;Jan. 12, 2013&nbsp;&nbsp;|&nbsp;&nbsp;<a href="single_video.html">15 comments</a></div>
      </div>
     
     </div>
    </div> <!-- End Widget -->
  
   </div> <!-- End Sidebar -->
  
  </div> <!-- End Row-Fluid -->
 </div> <!-- End Container -->
 
 <div id="bottom">
  <div class="container">
   <div class="row-fluid">
   
    <div class="span3 widget clearfix">
     <div class="header">
      <h4>About Us</h4>
     </div>
     
     <div class="content">
      <p>Donec dignissim leo sit amet nisl luctus vestibulum. Morbi tortor arcu, aliquet nec aliquet at, convallis ut eros. Sed non tellus mauris, vitae congue ante.</p>
      <p>Nunc imperdiet malesuada pharetra. Duis sodales, arcu tempus rutrum consectetur, sem ante auctor eros, in vehicula magna mauris sit amet est. Mauris ac eros arcu.</p>
     </div>
    </div> <!-- End Widget -->
    
    <div class="span3 widget clearfix">
     <div class="tags-cloud">
      
      <div class="header">
       <h4>Tags Cloud</h4>
      </div>
      
      <ul>
       <li><a href="blog_posts.html">windows</a></li>
       <li><a href="blog_posts.html">apple</a></li>
       <li><a href="blog_posts.html">software</a></li>
       <li><a href="blog_posts.html">hardware</a></li>
       <li><a href="blog_posts.html">gadget</a></li>
       <li><a href="blog_posts.html">smartphone</a></li>
       <li><a href="blog_posts.html">laptop</a></li>
       <li><a href="blog_posts.html">business</a></li>
       <li><a href="blog_posts.html">learn</a></li>
       <li><a href="blog_posts.html">study</a></li>
       <li><a href="blog_posts.html">game</a></li>
       <li><a href="blog_posts.html">movie</a></li>
       <li><a href="blog_posts.html">event</a></li>
      </ul>
      
     </div>
    </div> <!-- End Widget -->
    
    <div class="span3 widget clearfix">
     <div class="tweets">
      
      <div class="header">
       <h4>Latest Tweets</h4>
      </div>
      
      <ul>
       <li>
        <span class="picons"><!-- --></span>
        <p><a href="#">@realt0rlife</a> That's a very good question :) You may want to contact the author. There's a form on the right when you click their name.</p>
        <span class="date">- 10 hours ago</span>
       </li>
       <li>
        <span class="picons"><!-- --></span>
        <p><a href="#">@ghostpool</a> Have you opened a support ticket yet? Can you send methe ticket number? Thanks!</p>
        <span class="date">- 2 days ago</span>
       </li>
      </ul>
      
     </div>
    </div> <!-- End Widget -->
    
    <div class="span3 widget clearfix">
     <div class="flickr-photos">
      
      <div class="header">
       <h4>Flickr Photos</h4>
      </div>
      
      <ul id="flickr-gallery"><!-- --></ul>
      
     </div>
    </div> <!-- End Widget -->
   
   </div> <!-- End Row-Fluid -->
  </div> <!-- End Container -->
 </div> <!-- End Bottom -->
  
 <div id="footer">
  <div class="container">
   
   <p class="pull-left">Copyright 2013 Dots Theme&nbsp;&nbsp;|&nbsp;&nbsp;All Rights Reserved&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">Dots Theme</a></p>
   <ul class="social pull-right">
    <li><a href="#" title="Youtube"><img src="images/social/f0101/youtube.png" alt="Youtube" /></a></li>
    <li><a href="#" title="LinkedIn"><img src="images/social/f0101/linkedin.png" alt="LinkedIn" /></a></li>
    <li><a href="#" title="Vimeo"><img src="images/social/f0101/vimeo.png" alt="Vimeo" /></a></li>
    <li><a href="#" title="Tumblr"><img src="images/social/f0101/tumblr.png" alt="Tumblr" /></a></li>
    <li><a href="#" title="Flickr"><img src="images/social/f0101/flickr.png" alt="Flickr" /></a></li>
    <li><a href="#" title="DeviantArt"><img src="images/social/f0101/deviantart.png" alt="DeviantArt" /></a></li>
    <li><a href="#" title="Delicious"><img src="images/social/f0101/delicious.png" alt="Delicious" /></a></li>
    <li><a href="#" title="Facebook"><img src="images/social/f0101/facebook.png" alt="Facebook" /></a></li>
    <li><a href="#" title="Twitter"><img src="images/social/f0101/twitter.png" alt="Twitter" /></a></li>
   </ul>
   
  </div> <!-- End Container -->
 </div> <!-- End Footer -->
 
 <a href="#" class="scrollup" title="Back to Top!">Scroll</a>

 <div id="customize">
  <h5>Options</h5>
  <div class="wrapper">
   <div class="colors">
    <h6>Colors</h6>
    <a href="#" class="orange" title="Orange" style="background-color:#f15620;"></a>
    <a href="#" class="blue" title="Blue" style="background-color:#1d96e2;"></a>
    <a href="#" class="green" title="Green" style="background-color:#45b519;"></a>
   </div>
  </div>
 </div>

</body>
</html>